<!--  当前组件：  component  -->
<template>
  <div class='page_component'>
    <navTitle title='服务热线' />
    <div class='nav-search' :style='{top: stickyTop}'>
      <van-search v-model='params.search' shape='round' use-action-slot placeholder='请输入搜索内容' @change='({mp})=>inputValue(mp, params,`search`)'>
        <span slot='action' class='search-btn' @click='handleSearch'>搜索</span>
      </van-search>
    </div>
    <div class='page_component-container'>
      <template v-if='list.length'>
        <div v-for='item in list' :key='item.id'>
          <van-cell :title='item.title' @click='handleClick(item)'>
            <span><van-icon name="phone" color="red" /> {{ item.phone }}</span>
          </van-cell>
          <div class='bottom12'></div>
        </div>
        <loadEnd v-if='list.length>=queryParams.total' />
      </template>
      <van-empty v-else description='暂无数据'></van-empty>
    </div>
  </div>
</template>

<script>
  import {api} from '@/utils/api';
  export default {
    name: 'page_component',
    data() {
      return {
        list: [
          {id: 1, title: '报警热线', phone: '110'},
          {id: 2, title: '急救热线', phone: '120'},
          {id: 3, title: '火警热线', phone: '119'},
          {id: 3, title: '交警热线', phone: '122'},
          {id: 3, title: '铁路客服中心', phone: '12306'},
          {id: 3, title: '森林火警', phone: '95119'},
          {id: 3, title: '号码查询', phone: '114'},
          {id: 3, title: '水上救援', phone: '12395'},
          {id: 3, title: '消费维权投诉电话', phone: '12315'},
          {id: 3, title: '物价举报投诉电话', phone: '12358'},
          {id: 3, title: '劳动和社会保障局', phone: '12333'},
          {id: 3, title: '环保局监督电话', phone: '12369'},
          {id: 3, title: '全国法律服务热线', phone: '12348'},
        ],
        queryParams: {
          pageSize: 10,
          pageNum: 1,
          total: 0
        },
        params: {
          search: ''
        },
        stickyTop: this.globalData.height
      }
    },
    computed: {
      userInfo() {
        return this.$store.getters.userInfo || {};
      },
    },
    onLoad() {
      // this.handleSearch();
    },
    methods: {
      async getListFn() {  /**获取列表数据*/
        wx.showLoading({ title: '加载中', mask: true });
        //const res = await api(data);
        //if(res.code == 200) {
        //  this.list = this.list.concat(res.data);
        //  this.queryParams.total = res.total;
        //} else {
        //   wx.showToast({
        //     title: '请求异常',
        //     icon: 'error'
        //   })
        // }
       
        setTimeout(() => { wx.hideLoading(); }, 500);
      },
      handleSearch() {  /**搜索事件*/
        this.queryParams.pageNum = 1;
        this.queryParams.total = 0;
        // this.list = [];
        this.getListFn();
      },
      handleClick(obj) { /**点击事件进入下级菜单*/
        wx.makePhoneCall({
          phoneNumber: obj.phone
        })
      }
    },
    onPullDownRefresh() { /**下拉刷新*/
      wx.startPullDownRefresh({
        complete: () => {
          this.handleSearch();
          wx.stopPullDownRefresh();
        }
      });
    },
    onReachBottom() {  /**滚动加载*/
      if(this.list.length < this.queryParams.total) {
        this.queryParams.pageNum += 1;
        this.getListFn();
      }
    },
    onShareAppMessage() {
      return {
        title: '小程序',
        path: '/pages/index/main',
        from: 'menu'
      }
    }
  }
</script>
<style lang='scss' scoped>
  .page_component {
    height: 100vh;
    background: #f5f5f5;
    overflow: overlay;
    .page_component-container {
      padding: 24rpx;
    }
  }
</style>